<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    switchFullscreen
    @ok="handleOk"
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
    @cancel="handleCancel"
    cancelText="关闭">
    <j-form-container >
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
         
          <a-col :span="24">
            <a-form-model-item label="发送人员:" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="realname">
              <a-input v-model="model.realname" placeholder="请选择发送人员" style="width: 100%" readOnly>
                <a-tooltip slot="suffix" title="添加人员">
                  <a-icon type="plus"   @click="selectUser(record)"/>
                </a-tooltip>
              </a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="审批意见:" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="comments">
              <a-textarea v-model="model.comments" :autosize="true" placeholder="请输入审批意见"  />
            </a-form-model-item>
          </a-col>
         
        </a-row>
      </a-form-model>
    </j-form-container>

    <user-select ref="userSelect" @setResult="setResult" :origin-target-keys="originTargetKeys"/>
  </j-modal>
</template>

<script>

  import HteLibCompanyForm from './HteLibCompanyForm'
  
  export default {
    name: 'HteLibCompanySendMessage',
    components: {
       UserSelect: () => import('@/components/tools/UserSelect'),
    },
    data () {
      return {
        title:'公司库审批通过',
        width:800,
        visible: false,
        disableSubmit: false,
        originTargetKeys: [],
        finishNoticeUser:[],
         labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        model:{
          sendUsers:'',
          comments:'',
          realname:'',
        },
         validatorRules: {
           realname: [
              { required: true, message: '请选择发送人员!'},
           ],
          }
      }
    },
    mounted() {
      this.visible = false;
    },
    methods: {
      setResult(result) {
      var usernames = []
      var realnames = []
      if (result != null) {
        result.forEach((item) => {
          usernames.push(item.username)
          realnames.push(item.realname)
        })
      }
      this.model.sendUsers = usernames.join(',')
      this.model.realname = realnames.join(',')
      this.originTargetKeys = !!this.model.sendUsers ? this.model.sendUsers.split(',') : []
    },
    selectUser() {
      
      
      this.$refs.userSelect.doSelect()
    },
    doSelect() {
      this.visible = true
    },
    open (finishNoticeUser) {
      debugger
      this.visible=true
      this.finishNoticeUser = finishNoticeUser

      this.$nextTick(()=>{
        this.setResult(finishNoticeUser)
      })
    },
      
      close () {
        this.$emit('close');
        this.visible = false;
      },
      handleOk () {
       
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            this.$emit('ok',this.model);
            this.visible = false;
          }
         
        })
      },
      submitCallback(){
        this.$emit('ok');
        this.visible = false;
      },
      handleCancel () {
        this.close()
      }
    }
  }
</script>